<template>
  <base-modal :show.sync="visible" width="800px" class="calendar-vacation-modal" @closed="reset">
    <div slot="title" class="calendar-vacation-head">
      <button type="button" @click="adjustYear(-1)">
        <i class="iconfont icon-xiangzuo"></i>
      </button>
      <span>{{`${currentYear}${$t('common.base.year')}`}}</span>
      <button type="button" @click="adjustYear(1)">
        <i class="iconfont icon-xiangzuo-copy"></i>
      </button>
    </div>

    <div ref="vacationTable">
      <el-table
        class="calendar-vacation-table"
        :data="vacationList"
        style="width: 100%"
        border
      >
        <el-table-column :label="$t('common.base.date')" prop="festival"></el-table-column>
        <el-table-column :label="$t('common.base.remark')" prop="remarks"></el-table-column>
        <el-table-column :label="$t('common.base.operation')">
          <template slot-scope="scope">
            <el-button @click="openAddVacation('edit', scope.row)" type="text">
              {{ $t('common.base.edit') }}
            </el-button>
            <el-button @click="deleteVacation(scope.row)" type="text">
              {{ $t('common.base.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="calendar-vacation-footer">
      <div class="footer-add-vacation">
        <el-button type="primary" size="mini" @click="openAddVacation('add')">{{ $t('report.calendarVacationDialog.addVacation') }}</el-button>
      </div>
      <el-pagination
        class="base-pagination"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :total="vacationTotal"
        :page-size="vacationQuery.pageSize"
        :current-page="vacationQuery.pageNum"
        @current-change="jump"
      >
      </el-pagination>
    </div>

    <edit-vacation-dialog 
      ref="editVacationModal"
      :edit-vacation-title="editVacationTitle"
      :edit-vacation-form="editVacationForm"
      :edit-vacation-rules="editVacationRules"
      :pending="pending"
      @rest="resetEditVacation"
      @edit="editVacation"
    />
  </base-modal>
</template>
<script>
import { formatDate, dayTimeStart, dayTimeEnd, getTimestamp } from 'pub-bbx-utils';
import { t } from '@src/locales';
import Log from '@src/util/log.ts';

import http from 'src/util/HttpUtil'; 
import EditVacationDialog from './EditVacationDialog.vue';

const VACATION = '/api/ssbreport/outside/staff';

export default {
  name: 'calendar-vacation-dialog',
  props: {

  },
  data() {
    return {
      visible: false,
      pending: false,
      msec: new Date().getTime(),
      vacationList: [],
      vacationTotal: 0,
      vacationQuery: {
        pageNum: 1,
        pageSize: 10,
        year: ''
      },
      editVacationTitle: t('report.calendarVacationDialog.addVacation'),
      editVacationType: '',
      // 添加节假日
      editId: '',
      editVacationForm: {
        dateTime: [],
        remarks: ''
      },
      editVacationRules:{
        dateTime:[
          { required: true, message: t('common.placeholder.selectDate'), trigger: 'change' },
        ],
        remarks:[
          { required: true, message:t('task.detail.components.remarkPlaceholder'), trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
    currentYear() {
      let date = new Date(this.msec)
      return formatDate(date, 'YYYY');
    }
  },
  created() {
    this.initDateTime()
  },
  methods: {
    initDateTime() {
      // 默认值为当天
      this.editVacationForm.dateTime = [+dayTimeStart(), +dayTimeEnd()]
    },
    open() {
      this.visible = true
      this.getVacationList()
    },
    reset() {
      this.msec = new Date().getTime()
      this.vacationTotal = 0
      this.vacationQuery = {
        pageNum: 1,
        pageSize: 10
      }
    },
    getVacationList() {
      let instance = this.$loading.show(this.$refs.vacationTable);
      this.vacationQuery.year = this.currentYear
      http.get(`${VACATION}/calendar/festivalPage`, this.vacationQuery).then(res=>{
        if(res.code == 0){
          this.vacationList = res.data?.list
          this.vacationTotal = res.data?.total
        }
      }).finally(()=>{
        instance.hide()
      })
    },
    editVacation() {
      this.pending = true
      let params = {
        festivalDateStart: this.editVacationForm.dateTime[0],
        festivalDateEnd: this.editVacationForm.dateTime[1],
        remarks: this.editVacationForm.remarks
      }
      
      let vacationUrl = `${VACATION}/calendar/addFestival`
      let tips = this.$t('common.base.tip.addSuccess')
      
      if(this.editVacationType === 'edit') {
        params.id = this.editId
        vacationUrl = `${VACATION}/calendar/editFestival`
        tips = this.$t('common.base.tip.edit2Success')
      }

      http.post(vacationUrl, params).then(res => {
        if(res.code == 0){
          this.$platform.toast(tips)
          this.$refs.editVacationModal.close()
          this.getVacationList()
        } else {
          this.$message({
            message: res.message,
            type: 'error',
          })
        }
      }).finally(() => {
        this.pending = false
      })
    },
    deleteVacation(row) {
      try {
        http.post(`${VACATION}/calendar/deleteFestival`, [row.id]).then(res => {
          if(res.code == 0){
            this.$platform.toast(this.$t('common.base.tip.deleteSuccess'))
            this.getVacationList()
          }
        })
      } catch(error) {
        Log.error(error)
      }
    },
    resetEditVacation() {
      this.editVacationForm = {
        dateTime: [],
        remarks: ''
      }
      this.initDateTime()
    },
    adjustYear(num) {
      let date = new Date(this.msec);
      date.setFullYear(date.getFullYear() + num);
      this.msec = date.getTime();

      this.vacationQuery.pageNum = 1
      this.getVacationList()
    },
    openAddVacation(type, row) {
      this.$refs.editVacationModal.open()
      this.editVacationType = type
      if(this.editVacationType === 'edit') {
        this.editVacationTitle = this.$t('report.calendarVacationDialog.editVacation')
        this.openEditVacation(row)
      } else {
        this.editVacationTitle = this.$t('report.calendarVacationDialog.addVacation')
      }
    },
    openEditVacation(row) {
      this.editVacationForm.dateTime = row.festival ? [getTimestamp(row.festival), getTimestamp(row.festival)] : []
      this.editVacationForm.remarks = row.remarks || ''
      this.editId = row.id
    },
    jump(val) {
      this.vacationQuery.pageNum = val
      this.getVacationList()
    }
  },
  components: {
    [EditVacationDialog.name]: EditVacationDialog
  }
}
</script>
<style scoped lang="scss"> 
.calendar-vacation-head {
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  span{
    display: block;
    width: 88px;
    text-align: center;
    color: #000;
    line-height: 24px;
  }

  button{
    background-color: transparent;
    border: none;
    width: 26px;
    line-height: 24px;
    text-align: center;
    padding: 0;
    border-radius: 2px;
    transition: all ease .15s;
    font-weight: 600;
    font-size: 14px;
    outline: none;
    color: #000;

    &:hover{
      color: #337ab7;
      background-color: #f0f0f0;
    }
  }
}
.calendar-vacation-table {
  min-height: 200px !important;
}
.calendar-vacation-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  .footer-add-vacation  {
    padding: 8px 5px;
    .el-button--mini {
      border-radius: 4px;
    }
  }
  .base-pagination {
    border-top: none;
  }
}
</style>

